<template>
  <div class="container">
    <div class="main-tab">
      <x-header id="header" slot="header" :left-options="{showBack: false}" >
        <x-icon type="ios-arrow-back" slot="left" style="fill:#fff;" @click="back"></x-icon>
        <span slot="default" class="header-tit">登录</span>
      </x-header>
      <div class="main-headerAndTab">
        <group gutter="0">
          <cell-box>
            <x-input placeholder="请输入手机号码" class="input"  mask="99999999999" is-type="china-mobile"  :max="11" v-model="mobile">
              <img slot="label" style="padding-right:10px;display:block;" src="../../../static/img/loginPhone.png" width="24" height="24">
            </x-input>
          </cell-box>
          <cell-box>
            <x-input placeholder="请输入密码" :show-clear="false" class="input" type="password" v-model="pwd">
              <img slot="label" style="padding-right:10px;display:block;" src="../../../static/img/password2.png" width="24" height="24">
            </x-input>
          </cell-box>
          <cell-box>
            <x-input placeholder="请输入图形码" class="input"  mask="99999999999"   :max="4" v-model="code" >
              <img slot="label" style="padding-right:10px;display:block;" src="../../../static/img/code.png" width="24" height="24">
            </x-input>
            <div @click="refreshCode()" class="code">
              <identify :identifyCode="identifyCode"></identify>
            </div>
          </cell-box>
          <cell-box>
          </cell-box>
        </group>
        <div class="save">
          <x-button class="save-button" @click.native="loginHandle">登录</x-button>
        </div>
        <div class="bottom">
          <flexbox>
            <flexbox-item><div class="flex-demo"><span class="reg" @click="goreg">注册</span></div></flexbox-item>
            <flexbox-item><div class="flex-demo"><span class="forget">忘记密码</span></div></flexbox-item>
          </flexbox>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
  // 引入验证码组件
  import identify from "../../components/page/identify.vue";
  import { sendSms, register, login  } from '@/api/user'
  import { isPhoneNumber } from '@/libs/util'
  import { cookie,Flexbox, FlexboxItem } from 'vux'
  export default {
    name: 'registrationLogin',
    // 注册验证码组件
    components: { Flexbox, FlexboxItem ,identify },
    data () {
      return {
        // 验证码初始值
        identifyCode: '1234',
        // 验证码的随机取值范围
        identifyCodes: '1234567890',
        mobile:'',
        pwd:'',
        code:'',
        loginType:2
      }
    },
    mounted () {
      // 刷新页面就生成随机验证码
      this.identifyCode = ''
      this.makeCode(this.identifyCodes, 4)
    },
    methods: {
      goreg(){
        this.$router.push({
          name: 'reg'
        })
      },
      back(){
        this.$router.go(-1)
      },
      // 点击验证码刷新验证码
      refreshCode(){
        this.identifyCode="";
        this.makeCode(this.identifyCodes,4);
      },
      // 生成一个随机整数  randomNum(0, 10) 0 到 10 的随机整数， 包含 0 和 10
      randomNum (min, max) {
        return Math.floor(Math.random() * (max - min) + min)
      },
      // 随机生成验证码字符串
      makeCode (data, len) {
        for (let i = 0; i < len; i++) {
          this.identifyCode += data[this.randomNum(0, data.length - 1)]
        }
        console.log(this.identifyCode);
      },
      loginHandle(){
        if (!this.mobile) {
          this.vux.toast.show({
            text:'号码不能为空',
            type:'cancel'
          })
          return
        }
        if (!this.pwd){
          this.vux.toast.show({
            text:'密码不能为空',
            type:'cancel'
          })
          return
        }
        if (this.code !== this.identifyCode){
          this.vux.toast.show({
            text:'验证码错误',
            type:'cancel'
          })
          return
        }
        login({
          mobile: this.mobile,
          password:this.pwd,
          loginType:this.loginType
        }).then(res =>{
          console.log(res)
          cookie.set('token',res.token,{
            expires: 1
          })
          cookie.set('userInfo',JSON.stringify(res.userInfo),{
            expires: 1
          })
          this.globalData.cid = res.userInfo.id
          this.globalData.mobile = res.userInfo.mobile
          this.$router.push({
            name:'home'
          })
        })
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .header-tit{
    margin-top: 0.2rem;
  }
  #header{
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
  }
  .save-button{
    background: #AD2532;
    border-radius: 22.5px;
  }
  .bottom{
    margin-top: 1.26rem;
  }
  .reg{
    /*margin-left: 5.63rem;*/
    margin-left: 50%;
    font-size: 14px;
    color: #4A90E2;
    letter-spacing: -0.34px;
    text-align: center;
  }
  .forget{
    /*margin-left:3.03rem;*/
    margin-left: 20%;
    font-size: 14px;
    color: #9B9B9B;
    letter-spacing: -0.34px;
    text-align: center;
  }
  .container{
    width: 100%;
    height: 100vh;
    background-color: white;
    overflow: hidden;
  }
  .code{
    width: 5rem;
    height: 2.08rem;
    border: 1px solid #F4F4F4;
  }
  .input{
    width: 100%;
  }
</style>
